import { DatePicker, NavBar } from "antd-mobile"
import './index.scss'
import { useEffect, useMemo, useState } from "react"
import classNames from "classnames"
import dayjs from "dayjs"
import { useSelector } from "react-redux"
import _ from 'lodash'
import MonthlyBill from './components'

const Year = () => {

    // 时间显示
    const [currentYear, setCurrentYear] = useState(() => {
        return dayjs(new Date()).format('YYYY')
    })

    // 控制时间选择器开关
    const [dateVisible, setDateVisible] = useState(false)
    // 确认时间选择器回调
    const onConfrim = (date) => {
        setDateVisible(false)
        // 其他逻辑
        const formatDte = dayjs(date).format('YYYY')
        setYearList(yearGroup[formatDte] ?? [])
        setCurrentYear(formatDte)
    }

    // 按年做数据的分组
    const billList = useSelector(state => state.bill.billList)
    const yearGroup = useMemo(() => {
        // return出去计算之后的值
        return _.groupBy(billList, (item) => dayjs(item.date).format('YYYY'))
    }, [billList])

    const [currentYearList, setYearList] = useState([])

    // 初始化时将当前年份的统计数据显示出来
    useEffect(() => {
        setYearList(yearGroup[currentYear] ?? [])
    }, [yearGroup])

    const yearResult = useMemo(() => {
        // 支出    /   收入   /   结余
        const pay = currentYearList.filter(item => item.type === 'pay').reduce((a, c) => a + c.money, 0)
        const income = currentYearList.filter(item => item.type === 'income').reduce((a, c) => a + c.money, 0)
        return {
            pay,
            income,
            total: pay + income
        }
    }, [currentYearList])

    // 当前年份按照月份进行分组
    const monthGroup = useMemo(() => {
        // return出去计算之后的值
        const groupMonth = _.groupBy(currentYearList, (item) => dayjs(item.date).format('M'))
        // 获取 groupDate的key并进行排序
        const keys = Object.keys(groupMonth).sort((a, b) => {
            return Number(a.slice(a.lastIndexOf('.') + 1)) - Number(b.slice(b.lastIndexOf('.') + 1))
        })
        return {
            groupMonth,
            keys
        }
    }, [currentYearList])

    return (
        <div className="annualBill">
            <NavBar className="nav" backArrow={false}>
                年度收支
            </NavBar>
            <div className="content">
                <div className="date" onClick={() => setDateVisible(true)}>
                    <span>{currentYear}年</span>
                    <span className={classNames('arrow', dateVisible && 'expand')}></span>
                </div>
                <DatePicker
                    className="kaDate"
                    title="记账日期"
                    precision="year"
                    visible={dateVisible}
                    onCancel={() => setDateVisible(false)}
                    onConfirm={onConfrim}
                    max={new Date()}
                />
                <div className="header">
                    <div className="twoLineOverview">
                        <div className="item">
                            <span className="money">{yearResult.pay.toFixed(2)}</span>
                            <span className="type">支出</span>
                        </div>
                        <div className="item">
                            <span className="money">{yearResult.income.toFixed(2)}</span>
                            <span className="type">收入</span>
                        </div>
                        <div className="item">
                            <span className="money">{yearResult.total.toFixed(2)}</span>
                            <span className="type">结余</span>
                        </div>
                    </div>
                </div>

                {
                    monthGroup.keys.map(key => {
                        return <MonthlyBill key={key} date={key} billList={monthGroup.groupMonth[key]} />
                    })
                }
            </div>
        </div>
    )
}

export default Year